<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>auto view & auto link</title>
    
    <script src="../jquery.js"></script>
    <script src="../browser.js"></script>
    <script src="../angular.js"></script>
    <script src="../es6-module-loader.js"></script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        #wrapper{
            width: 600px;
            margin: 0 auto;
            border: 1px solid #ccc;
            background-color: #f5f6f7;

        }
    </style>
    <script>            
    	System.transpiler = "babel";
    	System.babelOptions = {
	    	stage: 0
	    };  
        
        // console.info(ccc); 
        System.import("./hc-dicom-parser.es6")
            .then(function(dicom) {
                "use strict"; 
                
                $(function() {
                    let f = $("#file"),
                        $wrapper = $("#wrapper"),
                        $c = $("#canvas"), 
                        c = $c.get(0),
                        ctx = c.getContext("2d"),
                        r = new FileReader(),
                        $zoomin = $(".zoom-in", $wrapper),
                        $zoomout = $(".zoom-out", $wrapper),
                        $up = $(".trans-up", $wrapper),
                        $down = $(".trans-down", $wrapper);
                    
                    let $rangeh = $(".range-h", $wrapper),
                        $rangev = $(".range-v", $wrapper),
                        $scale = $(".scale", $wrapper);
                    
                    
					$c.on("contextmenu", function(evt) {
						evt.preventDefault();
					})
                    
                    
                    let imageData = null, top = 0, left = 0;
                    let img = new Image();
                    
                    img.onload = function() {
                        $up.show();
                       // $wrapper.append(img);
                    }
                    
                    r.onload = function() {
                        let parser = new dicom.Parser();
                        parser.windowCenter = 100;
                        parser.windowWidth = 100;
                        parser.restoreWindowWidthAndWindowCenter();
                        parser.parse(r.result);
                        //console.log(parser.toString());  
                        //$("body").append("<div></div>").text(parser.toString());
                        imageData = parser.fillImageData(ctx.createImageData(512, 512));
                        //ctx.putImageData(imageData, 0, 0);
                        //img.src = c.toDataURL(`image/png`); 
                    };
                    
                    f.on("change", function() {
                        var ff = f.get(0).files[0];
                        r.readAsArrayBuffer(ff);
                    });
                    
                    $down.click(function() { 
                        //c.width = c.width;
                        ctx.putImageData(imageData, 0, top += 10);
                       
                    });
                      
                  System.import("./hc-canvas.es6.forth").then(function(ccc) {
                    let can = new ccc.Canvas($("#canvas").get(0));
                    let flag = true, top = 0, left = 0, zoom = 1;
                      
                    $rangeh.on("change", function(){                               
                        left = this.value;
                        if (flag) {
                            can.toImage();
                            flag = !flag;
                        }
                        ctx.setImageData(imageData);
                        
//                        console.group("start");
//                        console.time("aa");
                        can.translateTo(Number(left), Number(top));
//                        console.timeEnd("aa");
//                        console.groupEnd("start");
                       $(".number").text(left);
                    });
                      
                    $rangev.on("change", function(){     
                        top = -this.value;
                        if (flag) {
                            can.toImage();
                            flag = !flag;
                        }
                        
//                        console.group("start");
//                        console.time("aa");
                           can.translateTo(Number(left), Number(top));
//                        console.timeEnd("aa");
//                        console.groupEnd("start");
                        $(".number").text(top);
                        });
                      
                       $zoomin.on("click", function() {
                            if (flag) {
                                can.toImage();
                                flag = !flag;
                            }
                           if (zoom <= 2) {
                        
                            can.zoomTo(zoom += 0.25); 
                           }
                        });
                      
                       $zoomout.on("click", function() {
                            if (flag) {
                                can.toImage();
                                flag = !flag;
                            }
                           if (zoom >= .5) {
                            can.zoomTo(zoom -= 0.25); 
                           }
                        });
                      
                      let mousedown = false,
                          offset = {x: 0, y:0};
                      
                      $c
                          .on("mousedown", function(evt) {
                              mousedown = true;
                              offset = {
                                  x: evt.offsetX,
                                  y: evt.offsetY
                              };
                          })
                          .on("mousemove", function(evt) {                          
                              if (mousedown) {
                                  if (flag) {
                                     // can.toImage();
                                      can.setImageData(imageData);
                                      flag = !flag;
                                  }
                                  
                                  
                                  let x = evt.offsetX - offset.x,
                                      y = evt.offsetY - offset.y;
                                  
                                  //console.profile(); 
                                  can.translate(x, y);  

                                  //console.profileEnd();                                   
                                  
                                  offset.x = evt.offsetX;
                                  offset.y = evt.offsetY;
                                  
                              }
                          })
                          .on("mouseup", function(evt) {
                              mousedown = false;
                          });
                      
                      
                    });
                    
                   
                  
                });
            });
    </script>
</head>
<body>
   <div id="wrapper">
       <button class="zoom-in">zoom in</button>
       <button class="zoom-out">zoom out</button>
       <button class="trans-left">left</button>
       <button class="trans-right">right</button>
       <button class="trans-up" style="display:none;">up</button>
       <button class="trans-down">down</button>
       <br>
       <input type="file" id="file"><span class="number"></span>
       <br>
       <input type="range" class="range-h" min="-512" max="512" value="0" style="width:500px;">
       <input type="range" class="range-v" min="-512" max="512" value="0" style="float: right; margin-right: -45px;-webkit-appearance:slider-vertical; -moz-appearance:slider-vertical; height:500px;">
    <canvas id="canvas" width="512" height="512">your browser doesn't support canvas</canvas>
    
       scale<input type="range" class="scale" min="1" max="20" value="10" style="width:500px;">
   </div>
 
</body>
</html>